<template>
	<view>
		<custom-navigation-bar title="form表单"></custom-navigation-bar>
		<view class="main">
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						姓名
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="updateName" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						性别
					</view>
					<view class="form-item-countent">
						<radio-group @change="updateSex" style="margin-top: 20rpx;">
							<radio value="男" class="custom-radio" checked />男
							<radio value="女" class="custom-radio" />女
						</radio-group>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						电话
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="updatePhone" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						申请区域
					</view>
					<view class="form-item-countent">
						<position-picker class="position-picker" @update-region="regionChange"></position-picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						详细地址
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="updatePosition" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						服务范围
					</view>
					<view class="form-item-countent">
						<picker @change="serviceChange" :range="serviceArray">
							<view style="padding: 20rpx;background-color: white;">{{ service }}</view>
						</picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						选择模块
					</view>
					<view class="form-item-countent">
						<picker @change="moduleChange" :range="moduleArray">
							<view style="padding: 20rpx;background-color: white;">{{ module }}</view>
						</picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						类型
					</view>
					<view class="form-item-countent">
						<radio-group @change="updateType" style="margin-top: 20rpx;">
							<radio value="个人" class="custom-radio" checked />个人
							<radio value="企业" class="custom-radio" />企业
						</radio-group>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						机构标签
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="tagChange" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						法人姓名
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="updateLegalPersonName" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						法人身份证号
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容"
							@input="updateLegalPersonIdCard" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<uni-file-picker @select="handleIdSelect" @delete="handleIdDelete" limit="2"
						title="请上传身份证反正面照片(最多2张)" :source-type="sourceType"></uni-file-picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						商户名称
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="updateShopName" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						营业执照编码
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入内容" @input="updateLicense" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<uni-file-picker @select="handleLicenseSelect" @delete="handleLicenseDelete" limit="1"
						title="请上传营业执照(最多1张)" :source-type="sourceType"></uni-file-picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						开户行
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入银行名称" @input="updateBankName" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						银行卡号
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入银行卡号" @input="updateBankCard" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<uni-file-picker limit="5" file-mediatype="all" title="请上传附件(最多选择5个)" @select="handleFileSelect"
						@delete="handleFileDelete"></uni-file-picker>
				</view>
			</view>
			<view class="form-item">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<view class="btn" @click="submit">按钮</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineComponent
	} from 'vue';
	import http from '../../utils/http';
	import {
		generateApplicationId,
		getCurrentTimestamp,
		generateTime
	} from '../../utils/timeUtils';
	const serviceArray = ref(['全国', '本省', '本市', '本小区'])
	const service = ref("请选择服务范围")
	
	
	
	const moduleArray = ref(['教培团购', '社区服务', '家政服务'])
	const module = ref("请选择模块")
	const checkedArr = ref([]) //复选框选中的值
	const checkboxData = ref([{
			'value': 0,
			'label': '早教'
		},
		{
			'value': 1,
			'label': '英语'
		},
		{
			'value': 2,
			'label': '语文'
		},
		{
			'value': 3,
			'label': '数学'
		},
	])
	// 身份证
	const frontImage = ref("../../static/images/user/id_front.jpg")
	const backImage = ref("../../static/images/user/id_back.jpg")
	const licenseImage = ref("../../static/images/user/id_front.jpg")
	
	// 提取字段
	const applicationContent = ref({
		applicationId: "",
		applicationTime: "",
		applicationType: "shop",
		currentType: getApp().globalData.user.identity,
		openid: getApp().globalData.user.openid, // 商家的openid
		name: '', // 姓名
		sex: '男', // 性别
		phone: '', // 电话
		province: '',
		city:"",
		district:"",
		position: '', // 详细地址
		longitude: '', // 经度
		latitude: '', // 纬度
		service: '', // 服务范围
		module: '', // 选择模块
		tags: '', // 机构标签
		legalPersonName: '', // 法人姓名
		legalPersonIdCard: '', // 法人身份证号
		shopName: '', // 商户名称
		license: '', // 营业执照编码
		bankName: '', // 开户行
		bankCard: '', // 银行卡号
		idImage: [],
		licenseImage: "",
		files: [],
		applicationStatus:"pending"
	
	});
	const image = ref({
		idCard: [], //身份证正反面照片
		license: "", // 营业执照照片
		files: [], // 附件 最多5个
	})
	// 联系人姓名
	function updateName(e) {
		applicationContent.value.name = e.target.value;
	}
	// 性别
	function updateSex(e){
		applicationContent.value.sex = e.target.value;
	}
	// 联系人电话
	function updatePhone(e) {
		applicationContent.value.phone = e.target.value;
	}
	// 所在区域
	function regionChange(e) {
		// console.log("position", e[0] + "-" + e[1] + "-" + e[2])
		// applicationContent.value.region = e[0] + "-" + e[1] + "-" + e[2]
		applicationContent.value.province = e[0]
		applicationContent.value.city = e[1]
		applicationContent.value.district = e[2]
	}
	// 详细地址
	function updatePosition(e) {
		applicationContent.value.position = e.target.value;
	}
	// 服务范围
	function serviceChange(e) {
		service.value = serviceArray.value[e.detail.value]
		applicationContent.value.service = serviceArray.value[e.detail.value]
	}
	// 选择模块
	function moduleChange(e) {
		module.value = moduleArray.value[e.detail.value]
		applicationContent.value.module = moduleArray.value[e.detail.value]
	}
	// 机构标签
	function tagChange(e) {
		applicationContent.value.tags = e.target.value;
	}
	
	function updateLegalPersonName(e) {
		applicationContent.value.legalPersonName = e.target.value;
	}
	
	function updateLegalPersonIdCard(e) {
		applicationContent.value.legalPersonIdCard = e.target.value;
	}
	//身份证正面照片
	function handleIdSelect(e) {
		if (e.tempFiles.length == 0) {
			return;
		}
		for (let i in e.tempFiles) {
			image.value.idCard.push(e.tempFiles[i])
		}
	
	}
	
	function handleIdDelete(e) {
		console.log("delete", e)
		image.value.idCard.splice(e.index, 1); // 移除数组中对应的文件
	}
	
	function updateShopName(e) {
		applicationContent.value.shopName = e.target.value
	}
	
	function updateLicense(e) {
		applicationContent.value.license = e.target.value
	}
	
	function handleLicenseSelect(e) {
		image.value.license = e.tempFiles
	}
	
	function handleLicenseDelete(e) {
		image.value.license = e.tempFiles
	}
	
	function updateBankName(e) {
		applicationContent.value.bankName = e.target.value
	}
	
	function updateBankCard(e) {
		applicationContent.value.bankCard = e.target.value
	}
	
	function handleFileSelect(e) {
		if (e.tempFiles.length == 0) {
			return;
		}
		for (let i in e.tempFiles) {
			image.value.files.push(e.tempFiles[i])
		}
	}
	
	function handleFileDelete(e) {
		image.value.files.splice(e.index, 1); // 移除数组中对应的文件
	}
	
	// 上传文件函数
	async function uploadFile(file, fileType) {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: 'http://localhost:8080/utils/upLoadFile',
				filePath: file.path,
				name: 'file', // 文件字段名
				formData: {
					"filename": generateApplicationId(true, file),
					"applicationId": applicationContent.value.applicationId,
					"type": "shopApplication"
				},
				success: (uploadRes) => {
					const res = JSON.parse(uploadRes.data).data;
					if (fileType === 'idCard') {
						applicationContent.value.idImage.push(res)
					} else if (fileType === 'license') {
						applicationContent.value.licenseImage = res;
					} else if (fileType === 'file') {
						applicationContent.value.files.push(res);
					}
					resolve();
				},
				fail: (error) => {
					console.log('上传失败', error);
					reject(error);
				}
			});
		});
	}
	async function submit() {
		try {
			applicationContent.value.applicationId = generateApplicationId(false);
			applicationContent.value.applicationTime = generateTime();
			console.log("applicationContent", applicationContent.value);
	
			// 上传身份证图片
			const idCardPromises = image.value.idCard.map(idCardFile => uploadFile(idCardFile, 'idCard'));
	
			// 上传营业执照图片
			let licensePromise = Promise.resolve();
			if (image.value.license) {
				console.log("上传营业执照");
				licensePromise = uploadFile(image.value.license[0], 'license');
			}
	
			// 上传附件
			const filePromises = image.value.files.map(file => uploadFile(file, 'file'));
	
			// 等待所有上传操作完成
			await Promise.all([...idCardPromises, licensePromise, ...filePromises]);
	
			// 所有上传操作完成后，调用 http.request
			const responseData = await http.request({
				url: "/api/application/insert_application",
				method: "POST",
				data: {
					application: applicationContent.value
				}
			});
			console.log("提交成功", responseData.data);
			uni.showToast({
				icon: "success",
				title: "提交成功",
				duration: 1500,
				complete: function() {
					setTimeout(function() {
						uni.navigateBack({
							delta: 1 // 返回到上一页
						});
					}, 1500); // 延迟 1.5 秒，和 showToast 的 duration 相同
				}
			})
		} catch (err) {
			// 在这里处理上传文件过程中的错误
			console.log("上传文件失败", err);
		}
	}
	
	function test() {
		console.log("test", applicationContent.value)
		console.log("golbal", getApp().globalData.openid)
	}
</script>

<style>
	@import "./form.scss";
</style>